<script>
import { getDetailFissionProgress } from '@/api/task'
export default {
  name: '',
  components: {},
  data() {
    return {
      dialog: false,
      poster: '',
      completeNum: 0,
      form: {
        exchangeTip: 0, //兑奖条件(N人)
        weFissionInviterRecordSubList: [], //邀请记录
        exchangeContent: {
          //任务奖励，为空，则任务未完成
          redemptionLink: '', //兑奖链接
          redemptionRule: '', //兑奖规则
          weUserId: '', //兑奖客服员工id
          customerServiceCodeUrl: '', //兑奖客服员工活码(非微信客服，当前指代员工活码)
        },
      },
    }
  },
  computed: {},
  watch: {},
  mounted() {
    this.$toast.loading()
    let query = this.$route.query
    this.poster = query.poster
    getDetailFissionProgress(query)
      .then(({ data }) => {
        this.form = data
        this.completeNum = Number(this.form.exchangeTip) - this.form.weFissionInviterRecordSubList.length
        this.$forceUpdate()
        this.$toast.clear()
      })
      .catch(() => {
        this.$toast.clear()
      })
  },
  created() {},
  methods: {
    gotoNext() {
      if (this.form.exchangeTip <= this.form.weFissionInviterRecordSubList.length) {
        this.dialog = true
      }
    },
    getLink() {
      if (this.form.exchangeContent.redemptionLink) {
        window.location.href = this.form.exchangeContent.redemptionLink
      }
    },
  },
}
</script>

<template>
  <div class="content">
    <img class="bg" src="../../assets/vite.svg" alt="" />
    <div class="top">
      已邀请
      <span class="num">{{ form.weFissionInviterRecordSubList.length }}</span>
      人，还差
      <span class="num">{{ completeNum < 0 ? 0 : completeNum }}</span>
      人，即可领奖
    </div>
    <div class="poster">
      <img class="poster_img" :src="poster" alt="" />
      <div
        class="button"
        :class="{
          disable: form.exchangeTip > form.weFissionInviterRecordSubList.length ? true : false,
          active: form.exchangeTip <= form.weFissionInviterRecordSubList.length ? true : false,
        }"
        @click="gotoNext()"
      >
        去领奖
      </div>
    </div>
    <div class="record">
      <div class="title">
        邀请记录
      </div>
      <div class="list">
        <template v-if="form.weFissionInviterRecordSubList.length">
          <div class="list_item" v-for="(unit, key) in form.weFissionInviterRecordSubList" :key="key">
            <img class="avator" v-if="unit.avatar" :src="unit.avatar" alt="" />
            <img class="avator" v-else src="../../assets/img.svg" alt="" />
            <div class="name">{{ unit.inviterUserName }}</div>
            <div class="time">{{ unit.createTime }}</div>
          </div>
        </template>
        <img v-else style="width: 200px;" src="../../assets/no-record.png" alt="" />
      </div>
    </div>
    <van-popup v-model="dialog" round position="bottom" closeable :style="{ height: '400px' }">
      <template v-if="form.exchangeContent && form.exchangeContent.redemptionLink">
        <div class="dialog_title">兑奖规则</div>
        <div
          class="dialog_content"
          v-html="form.exchangeContent.redemptionRule.replace(/\n|\r\n/g, '<br>').replace(/ /g, ' &nbsp')"
        ></div>
        <div class="dialog_bottom" @click="getLink">确认兑奖</div>
      </template>
      <template v-else-if="form.exchangeContent && !form.exchangeContent.redemptionRule">
        <div style="text-align: center;">
          <img
            style="height: 200px; width: 200px; margin-top: 58px;"
            :src="form.exchangeContent.customerServiceCodeUrl"
          />
          <div class="des">长按添加客服，立刻参与兑奖</div>
        </div>
      </template>
      <template v-else-if="form.exchangeContent">
        <div class="dialog_title">兑奖规则</div>
        <div
          class="dialog_content"
          v-html="form.exchangeContent.redemptionRule.replace(/\n|\r\n/g, '<br>').replace(/ /g, ' &nbsp')"
        ></div>
      </template>
    </van-popup>
  </div>
</template>

<style lang="less" scoped>
.des {
  margin-top: 16px;
  font-size: 16px;
  font-weight: 700;
  color: #1d2129;
}
.dialog_title {
  margin-top: 21px;
  font-size: 16px;
  font-weight: 600;
  color: #222222;
  text-align: center;
}
.dialog_content {
  margin-bottom: 75px;
  max-height: 280px;
  overflow-y: scroll;
  padding: 16px;
}
.dialog_bottom {
  background: linear-gradient(90deg, #07c160 0%, #90de45 99%);
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: 246px;
  height: 48px;
  line-height: 48px;
  border-radius: 16px 16px 16px 16px;
  font-size: 18px;
  text-align: center;
  color: #fff;
}
.page {
  background: linear-gradient(90deg, #07c160 0%, #90de45 99%);
}
.content {
  padding: 16px;
}
.bg {
  position: fixed;
  right: 0;
  top: 0;
}
.top {
  text-align: center;
  margin-top: 24px;
  font-size: 20px;
  font-family: Alimama ShuHeiTi-Bold, Alimama ShuHeiTi;
  font-weight: 700;
  color: #ffffff;
  line-height: 25px;
  text-shadow: 0px 4px 16px rgba(0, 153, 73, 0.8);
  .num {
    color: #fdf100;
    font-size: 32px;
  }
}
.poster {
  position: relative;
  margin-top: 24px;
  height: 180px;
  background: #fff;
  border-radius: 16px 16px 16px 16px;
  padding: 2px;
  overflow: hidden;
  .poster_img {
    width: 100%;
    border-radius: 16px;
    object-fit: cover;
    height: 100%;
  }
  .button {
    margin-top: 15px;
    left: 50%;
    transform: translateX(-50%);
    width: 246px;
    height: 48px;
    line-height: 48px;
    border-radius: 16px 16px 16px 16px;
    font-size: 18px;
    text-align: center;
    color: #fff;
  }
  .disable {
    background: #cccccc;
  }
  .active {
    background: linear-gradient(90deg, #07c160 0%, #90de45 99%);
  }
}
.record {
  margin-top: 16px;
  padding: 16px;
  background: #fff;
  border-radius: 16px 16px 16px 16px;
  .title {
    font-size: 17px;
    font-weight: 700;
    color: #1d2129;
  }
  .list {
    margin-top: 8px;
    text-align: center;
    .list_item {
      padding: 16px 0;
      display: flex;
      align-items: center;
      .avator {
        width: 48px;
        height: 48px;
        border-radius: 16px 16px 16px 16px;
      }
      .name {
        font-size: 16px;
        font-weight: 500;
        color: #1d2129;
        margin-left: 8px;
      }
      .time {
        margin-left: auto;
        font-size: 14px;
        font-weight: 400;
        color: #86909c;
      }
      &:not(:last-child) {
        border-bottom: 1px solid #e5e6eb;
      }
    }
  }
}

.generalFont {
  color: #909399;
  font-size: 12px;
  padding: 0 18px;
  padding-bottom: 8px;
}
.container > .generalFont {
  background-color: #fff;
}

.listMsg {
  display: flex;
  align-items: center;
  margin: 20px 0;
}
.listMsg .generalFont {
  flex: none;
  width: 56px;
  margin-right: 30px;
  text-align: right;
}
.codeDetail {
  font-size: 12px;
  color: #333;
  word-break: break-all;
  overflow: hidden;
}
.generalContent {
  position: relative;
  background-color: rgb(246, 246, 249);
  margin-bottom: 15px;
  border: 18px solid #fff;
  border-top: 0;
  padding: 0 8px;
  overflow: auto;
  .tip {
    background: rgba(69, 63, 63, 81%);
    padding: 6px;
    border-radius: 5px;
    color: #fff;
    white-space: nowrap;
  }
}
.codeImg {
  height: 50px;
}
.customersList {
  display: flex;
  align-items: center;
  font-size: 15px;
  background-color: rgb(246, 246, 249);
  padding: 8px;

  .customersImg {
    height: 37px;
    border-radius: 50%;
    margin-right: 8px;
  }
  .name {
    font-size: 13px;
    font-weight: 500;
    margin-right: 8px;
  }
  .time {
    color: #909399;
    font-size: 12px;
  }
  .customersSuccess {
    flex: 1;
    font-size: 13px;
    text-align: right;
    color: #06c160;
  }
}
.customersBox {
  padding: 18px;
  background-color: #fff;
}

.activityPoster {
  padding: 18px;
  font-size: 18px;
  background-color: #fff;
  margin-top: 18px;
}
.activityPosterImg {
  width: 100%;
  margin-top: 18px;
}
</style>
